<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
    <el-form
      :model="formData"
      ref="formRef"
      :rules="formRules"
      vloading="formLoading"
      :inline="true"
      label-width="auto"
    >
      <el-form-item label="调入公海原因" prop="fallPoolReason">
        <el-select v-model="formData.fallPoolReason" placeholder="请输入调入公海原因">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.CUSTOMER_PUT_IN_REASON)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" :disabled="formLoading" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
  <ErrorMessage ref="errorMessageRef" />
</template>
<script setup name="CustomerPutInPoolReason" lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as CustomerApi from '@/api/customer/customer'
import ErrorMessage from '@/views/common/ErrorMeesage.vue'
const errorMessageRef = ref()
const dialogTitle = ref('放入公海')
const dialogVisible = ref(false)
const formRef = ref()
const formLoading = ref(false)
const formData = ref({
  fallPoolReason: getIntDictOptions(DICT_TYPE.CUSTOMER_PUT_IN_REASON)[0].label
})
let customerIds = []
const message = useMessage() // 消息弹窗

const formRules = reactive({})
/** 打开弹窗 */
const open = (ids) => {
  customerIds = ids
  formData.value = { fallPoolReason: getIntDictOptions(DICT_TYPE.CUSTOMER_PUT_IN_REASON)[0].label }
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const emit = defineEmits(['success'])
/** 提交表单 */
const submitForm = async () => {
  const errorInfo = await CustomerApi.putInPool({
    ids: customerIds,
    fallPoolReason: formData.value.fallPoolReason
  })
  if (errorInfo != undefined && errorInfo.length > 0) {
    errorMessageRef.value.open({
      title: '放入公海错误列表',
      data: errorInfo,
      columns: [
        {
          label: '客户编号',
          prop: 'customerNo'
        },
        {
          label: '名称',
          prop: 'name'
        },
        {
          label: '错误原因',
          prop: 'message'
        }
      ]
    })
  } else {
    message.success('放入成功')
  }

  dialogVisible.value = false
  emit('success')
}
</script>
